import { useState } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';
import { useStore } from '../store';
import "../assets/AddImg.css"

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('只能上传jpeg或png文件哦');
  }
//   const isLt2M = file.size / 1024 / 1024 < 2;
//   if (!isLt2M) {
//     message.error('Image must smaller than 2MB!');
//   }
    //   return isJpgOrPng && isLt2M;
  return isJpgOrPng
};
function AddImg () {
  const store = useStore();
  const [loading, setLoading] = useState(false);
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status !== 'uploading') {
        setLoading(false);
        console.log(info);
      // store.UploadImgStore.addImg(info.file);
        info.fileList.map(i => store.UploadImgStore.addImg(i));
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
      </div>
    </div>
  );
  return (
    <div style={{ height: '280px', paddingTop: '80px' }}>
      <Upload
        listType="picture-card"
        className="picture-uploader"
        showUploadList={false}
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {(
          uploadButton
        )}
      </Upload>
    </div>
  );
}
export default AddImg;